<template>
  <!--销售区域-->
  <div v-if="editDialogVisible9">
    <el-form>
     <el-row class="tr">
         <el-form-item>
        <el-form-item>
          <kt-button
            icon="fa fa-plus"
            :label="$t('action.add')"
            type="primary"
            @click="handleEditSaleArea"
          />
        </el-form-item>
      </el-form-item>
     </el-row>

      <el-table
        :data="saleAreaRelationSaved"
        border
        style="width: 100%">
        <el-table-column
          label="销售区域编码"
          prop="areaCode">
        </el-table-column>
        <el-table-column
          label="销售区域名称"
          prop="areaName"
        >
        </el-table-column>
        <!--        <el-table-column-->
        <!--          label="商家编码"-->
        <!--          prop="merchantCode"-->
        <!--        >-->
        <!--        </el-table-column>-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              :size="size"
              type="primary"
              @click="handleDeleteSaleArea(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <!--添加销售区域弹窗-->
    <el-dialog
      title="添加销售区域"
      width="50%"
      :visible.sync="editDialogVisible82"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dataFormSaleArea"
        label-width="80px"
        ref="dataForm"
        :inline="true"
        :size="size"
      >
        <el-table
          ref="multipleTable"
          :data="saleAreaRelationAll"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChangeSaleArea"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" v-if="false"></el-table-column>
          <el-table-column prop="areaCode" label="销售区域编码"></el-table-column>
          <el-table-column prop="areaName" label="销售区域名称"></el-table-column>
        </el-table>
      </el-form>
      <!--表格内容栏-->
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible82 = false">{{
          $t("action.cancel")
          }}
        </el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitFormmSaleArea"
          :loading="editLoading"
        >{{ $t("action.submit") }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import {format, formatDate} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";

  export default {
    components: {
      KtButton,
      CyTable,
      TableColumnFilterDialog
    },
    data() {
      return {
        size: "small",
        editDialogVisible9: false,
        editDialogVisible82: false,
        editLoading: false,
        productId: 0,
        dataFormSaleArea: {},
        saleAreaRelationAll: [],//所有销售区域
        saleAreaRelationSaved: [],//已保存的销售区域
      };
    },
    mounted() {
    },
    methods: {
      init(param) {
        this.editDialogVisible9 = param.flag
        this.productId = param.productId
        if (param.flag) {
          this.queryProductSaleAreaRelation()
        }
      },
      queryProductSaleAreaRelation() {
        //查询已保存的销售区域
        let this_ = this
        let param = {}
        param.productId = this_.productId
        this.utils.request.queryProductSaleAreaRelation(param, function (data) {
          this_.saleAreaRelationSaved = data.data
        })
      },
      handleEditSaleArea() {
        let this_ = this
        this_.saleAreaRelationAll = []
        this_.editDialogVisible82 = true
        //查询所有的销售区域
        let param = {}
        this.utils.request.queryAllSaleAreaRelation(param, function (data) {
          if (data.data != null) {
            this_.saleAreaRelationAll = data.data
          }
        })
      },
      //销售区域选择
      handleSelectionChangeSaleArea(params) {
        let this_ = this
        this_.selectionSaleArea = []
        $.each(params, function (index, val) {
          let arr = {}
          arr.saleAreaId = val.id
          arr.productId = this_.productId
          arr.merchantId = val.merchantId
          arr.areaName = val.areaName
          this_.selectionSaleArea.push(arr)
        })
      },
      submitFormmSaleArea: function (data) {
        if(this.selectionSaleArea.length ==0){
          return this.$message({message: "请选择要操作的数据", type: "error"});
        }
        this.$confirm("确认提交吗？", "提示", {}).then(() => {

          let this_ = this;
          let params = {}
          if(this_.saleAreaRelationSaved!=null){
            this_.saleAreaRelationSaved.forEach(item=>{
              this_.selectionSaleArea.forEach(function (item1,index){
                if(item.areaName==item1.areaName){
                  this_.selectionSaleArea.splice(index,1)
                }
              })
            })
          }
          params.productSaleAreaRelationRequests = this_.selectionSaleArea
          this.utils.request.saveSaleArea(params, function (data) {
            if (data.code == "0000") {
              this_.$message({message: "操作成功", type: "success"});
              this_.queryProductSaleAreaRelation()
              this_.editDialogVisible82 = false
            } else {
              this_.$message({message: "操作失败, " + data.message, type: "error"});
            }
          });
        });
      },
      // 删除已保存的销售区域
      handleDeleteSaleArea: function (index, row) {
        this.$confirm("确认删除吗？", "提示", {}).then(() => {
          let this_ = this;
          let params = {}
          params.saleAreaRelationId = row.saleAreaRelationId
          this.utils.request.deleteProductSaleAreaRelation(params, function (data) {
            if (data.code == "0000") {
              this_.$message({message: "操作成功", type: "success"});
              this_.queryProductSaleAreaRelation()
            } else {
              this_.$message({message: "操作失败, " + data.message, type: "error"});
            }
          });

        });
      },
    }
  };
</script>

<style scoped lang='scss'>
.tr{
  text-align: right;
}
</style>
